<script setup>
  import {ref} from 'vue'
  
  let count = ref(0);
  let fun1 = function() {
    count.value++;
  }

  function fun2(event) {
    if(count.value > 2){
      event.preventDefault();
    }
    ++count.value;
  }

  

</script>

<template>
  <div>
    <input type="text" v-bind:value="count" /><br />
    <input type="button" value="一直加" v-on:click="fun1()">
    <hr/>
    <input type="text" v-bind:value="count" /><br />
    <input type="button" value="加一次" v-on:click.once="fun1()">
    <hr/>
    <input type="text" v-bind:value="count" /><br /><!-- a标签的默认行为是跳转，input标签默认行为 -->
    <a v-bind:href="'https://www.baidu.com/'" v-on:click="fun2($event)" target="_blank">原生js阻止跳百度</a><br>
    <a v-bind:href="'https://www.baidu.com/'" v-on:click.prevent="fun2($event)" target="_blank">百度</a>
    <hr/>
    <input type="text" v-bind:value="count" /><br />
    <input type="button" value="内联事件" v-on:click="count++">
  </div>
</template>

<style scoped>

</style>
